<template>
  <h1
    v-if="computedState.type === 0"
    class="px-2 text-center font-200"
    :class="{
      'font-bold': !computedState.titleWeight,
      'font-italic': !computedState.titleItalic,
    }"
    :style="{
      fontSize: `${computedState.titleSize}px`,
      color: computedState.titleColor,
    }"
  >
    {{ computedState.title }}
  </h1>
  <p
    v-else
    :class="{
      'text-center': computedState.position,
      'font-bold': !computedState.descWeight,
      'font-italic': !computedState.descItalic,
    }"
    :style="{
      fontSize: `${computedState.descSize}px`,
      color: computedState.descColor,
    }"
  >
    {{ computedState.desc }}
  </p>
</template>

<script setup lang="ts">
import type { TypeStatus } from '@/types'
import { gerCurrentStatus, gerStringStatusByCurrentStatus, gerTextStatus } from '@/utils'

const props = defineProps<{
  serialNum: number | null // 序号
  status: TypeStatus
}>()
const radioVal = ref('')
const computedState = computed(() => {
  return {
    type: gerCurrentStatus(props.status.type),
    title: gerTextStatus(props.status.title),
    desc: gerTextStatus(props.status.desc),
    position: gerCurrentStatus(props.status.position),
    titleSize: gerStringStatusByCurrentStatus(props.status.titleSize),
    descSize: gerStringStatusByCurrentStatus(props.status.descSize),
    titleWeight: gerCurrentStatus(props.status.titleWeight),
    descWeight: gerCurrentStatus(props.status.descWeight),
    titleItalic: gerCurrentStatus(props.status.titleItalic),
    descItalic: gerCurrentStatus(props.status.descItalic),
    titleColor: gerTextStatus(props.status.titleColor),
    descColor: gerTextStatus(props.status.descColor),
  }
})
</script>

<style scoped></style>
